<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的会员卡</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<link href="/carworld_weixin/css/bootstrap.min.css" rel="stylesheet">
<link href="/carworld_weixin/css/card-style.css" rel="stylesheet">
<script src="/carworld_weixin/js/jquery-3.3.1.min.js"></script>
<script src="/carworld_weixin/js/tab.js"></script>
<link href="/carworld_weixin/css/loader.min.css" rel="stylesheet">
<script src="/carworld_weixin/js/loading.js"></script>
<style type="text/css">
.tb960x90 {
	display: none !important;
	display: none
}
</style>
</head>
<body>

	<section class="aui-flexView">
		<header class="aui-navBar aui-navBar-fixed b-line">
			<a href="javascript:;" class="aui-navBar-item">
				<i class="icon icon-return"></i>
			</a>
			<div class="aui-center">
				<span class="aui-center-title">我的会员卡</span>
			</div>
			<a href="javascript:;" class="aui-navBar-item">
				<i class="icon icon-share"></i>
				<span>规则</span>
			</a>
		</header>
		<section class="aui-scrollView">
			<div class="aui-tab" data-ydui-tab="">
				<div class="aui-item-ofl">
					<ul class="tab-nav">
						<li class="tab-nav-item tab-active">
							<a href="javascript:;">
								<i class="icon "></i>
								可使用
							</a>
						</li>
						<li class="tab-nav-item">
							<a href="javascript:;">
								<i class="icon "></i>
								可分享
							</a>
						</li>
						<li class="tab-nav-item">
							<a href="javascript:;">
								<i class="icon "></i>
								已分享
							</a>
						</li>
					</ul>
				</div>
				<!-- 提示语 -->
				<div id="marker"></div>
				<div class="tab-panel">
					<div class="tab-panel-item tab-active">
						<div class="tab-item">
							
						</div>
					</div>
				</div>
			</div>

			<footer class="aui-footer aui-footer-fixed">
				<a href="/carworld_weixin/" class="aui-tabBar-item">
					<span class="aui-tabBar-item-icon">
						<i class="glyphicon glyphicon-home"></i>
					</span>
					<span class="aui-tabBar-item-text">首页</span>
				</a>
				<a href="/carworld_weixin/pages/page_myVipCard.html" class="aui-tabBar-item ">
					<span class="aui-tabBar-item-icon">
						<i class="glyphicon glyphicon-heart"></i>
					</span>
					<span class="aui-tabBar-item-text">会员卡</span>
				</a>

				<a href="/carworld_weixin/pages/page_myOrder.html" class="aui-tabBar-item ">
					<span class="aui-tabBar-item-icon">
						<i class="glyphicon glyphicon-tasks"></i>
					</span>
					<span class="aui-tabBar-item-text">订单</span>
				</a>
				<a href="/carworld_weixin/user/userPage" class="aui-tabBar-item">
					<span class="aui-tabBar-item-icon">
						<i class="glyphicon glyphicon-user"></i>
					</span>
					<span class="aui-tabBar-item-text">我的 </span>
				</a>
			</footer>
		</section>
	</section>
	<script type="text/javascript">
		//先清空之前的会员卡信息，便于重新获取
		$('.tab-item').empty();
		loading(true);
		$.ajax({
			type : 'GET',
			url : '/carworld_weixin/vipcard/myCardMeals',
			data : {
				'type' : 0
			},
			dataType : 'json',
			contentType : 'application/json',
			success : function(data) {
				var count = data.page.totalRow;
				if (0 == count) {
					$('#marker').append('<p style="text-align:center;font-size:14px;color: #dc1818;">暂时还没有可使用的会员卡套餐哦~</p>');
					loading(false);
					return;
				}
				$.each(data.page.list, function(index, elem) {
					var html = '<a href="javascript:;" class="aui-flex aui-vou-content"><div class="aui-flex-box"><div class="aui-flex"><div class="aui-flex-cp-img">'+
					'<img src="/carworld_weixin/images/vip-card.jpg" alt=""></div><div class="aui-flex-box"><h2>' + elem.meal_name + '</h2><p><i>￥</i>' + elem.meal_price+'<em>有效期一年</em></p>'+
					'</div></div></div><div class="aui-vou-button"><span class="aui-received"></span><button class="aui-vou-btn-der">剩余' + elem.remaining_num + '张</button></div></a>';
					$('.tab-item').append(html);
				});
				loading(false);
			}
		});
	</script>

</body>
</html>